<template>
  <view class="drag-button" :style="{
    transform: `translate3d(${offsetX}px, ${offsetY}px, 0)`,
    transition: move ? 'none' : 'transform 0.2s ease-in-out',
  }" @click.stop="click" @touchmove.stop.prevent="touchmove" @touchstart="touchstart" @touchend="touchend"
  >
    <slot></slot>
  </view>
</template>

<script>
let safeArea = {}
export default {
  name: 'DragMusic',
  props: {
    drag: {
      type: Boolean,
      default: true
    },
    setOffWith: {
      type: Number,
      default: 120
    },
    follow: {
      type: String,
      default: 'all'
    },
    followNum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      offWith: `${uni.upx2px(120)}px`,
      offsetX: 0,
      offsetY: 0,
      width: 0,
      height: 0,
      left: 0,
      top: 0,
      move: false,
      foll: {

      }
    }
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync() || {}
    safeArea = { left: 0, top: 0, right: systemInfo.windowWidth, bottom: systemInfo.windowHeight }
    const query = uni.createSelectorQuery().in(this)
    query.select(`.drag-button`).boundingClientRect(data => {
      if (data) {
        this.width = data.width
        this.height = data.height
        this.left = data.left
        this.top = data.top
      }
    }).exec()
    if (this.follow) {
      const type = this.follow.split(',')
      let isLeft, isRight, isTop, isBottom, isAll
      type.forEach(_ => {
        if (_ === 'all') isAll = true
        if (_ === 'left') isLeft = true
        if (_ === 'right') isRight = true
        if (_ === 'top') isTop = true
        if (_ === 'bottom') isBottom = true
      })
      if (isAll) isLeft = isRight = isTop = isBottom = true
      const num = Math.round(this.width * this.followNum / 100)
      this.foll = { isLeft, isRight, isTop, isBottom, num }
    }
  },
  methods: {
    click() {
      // this.offWith = uni.upx2px(400) + 'px'
      this.$emit('btnClick')
    },
    touchstart(e) {
      if (!this.drag) return
      this.move = true
    },
    touchmove(e) {
      if (!this.drag) return
      if (!this.move) return
      const { left, right, top, bottom } = safeArea
      const dot = e.changedTouches[0]
      if (dot.clientX < left + this.width / 2) dot.clientX = left + this.width / 2
      if (dot.clientX > right - this.width / 2) dot.clientX = right - this.width / 2
      if (dot.clientY < top + this.height / 2) dot.clientY = top + this.height / 2
      if (dot.clientY > bottom - this.height / 2) dot.clientY = bottom - this.height / 2
      this.offsetX = dot.clientX - this.left - this.width / 2
      this.offsetY = dot.clientY - this.top - this.height / 2
    },
    touchend(e) {
      if (!this.drag) return
      this.move = false
      if (!this.follow) return
      const dot = e.changedTouches[0]
      const { left, right, top, bottom } = safeArea
      if (this.foll.isLeft && this.foll.isRight) {
        if (dot.clientX <= (left + right) / 2) this.offsetX = this.foll.num - this.left
        if (dot.clientX > (left + right) / 2) this.offsetX = right - this.width - this.foll.num - this.left
      }
      else if (this.foll.isLeft) {
        this.offsetX = this.foll.num - this.left
      }
      else if (this.foll.isRight) {
        this.offsetX = right - this.width - this.foll.num - this.left
      }
      if (this.foll.isTop && this.foll.isBottom) {
        if (dot.clientY <= (top + bottom) / 2) this.offsetY = this.foll.num - this.top
        if (dot.clientY > (top + bottom) / 2) this.offsetY = bottom - this.height - this.foll.num - this.top
      }
      else if (this.foll.isTop) {
        this.offsetY = this.foll.num - this.top
      }
      else if (this.foll.isBottom) {
        this.offsetY = bottom - this.height - this.foll.num - this.top
      }
    }
  }
}
</script>

<style scoped>
.drag-button {
  position: fixed;
  left: 0;
  top: 0;
  width: 120rpx;
  height: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30rpx;
  background-color: #fff;
  box-shadow: 0 5rpx 10rpx 0 rgba(0, 0, 0, 0.08);
  z-index: 999;
}
</style>
